<html>
<body>
aaaaaaaaaaaaaaaaaaaaaaaaaa<br>
bbbbbbbbbbbbbbbbbbbbbbbbbb<br>
ccccccc ccccccc cccccccccc<br>
<span style="font: 30pt;">font 30pt<big>bigger</big></span>
<ul>
  <li>item-aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa # 1
  <li>item # 2
  <li>item # 3<br>
  <ol>
    <li>item # 3.1
    <li>item # 3.2
    <li style="border: solid gray 3px;">item # 3.3 with border<br>
      <ul>
    <li><font size="6">item # 3.3.1<br> (font 6)</font></li>
    <li><font size="3">item # 3.3.2 (font 3)</font></li>
    <li><font size="1">item # 3.3.3 (font 1)</font><br>      
      </ul>
    <li>item # 3.4
  </ol>
</ul>

text right before list
<ul style="border: solid blue 3px; padding: 10px;">
	<span>normal span in list</span>
	<li>li # 1 in list</li>
	<span style="display: list-item;">span with display: list-item</span>
	<li style="border: solid gray 1px;">li # 2 in list with border</li>
	Free text in list.
	<li style="display: block; border: solid gray 2px;">li # 3 in list,<br> but display: block</li>
</ul>
text right after list
<p>
text right before div
<div style="border: solid blue 3px; padding: 10px;">
	<span>same as previous list, but a div</span>
	<li>li # 1 in list</li>
	<span style="display: list-item;">span with display: list-item</span>
	<li>li # 2 in list</li>
	Free text in list.
	<li style="display: block; border: solid gray 2px;">li # 3 in list, but display: block</li>
</div>
text right after div

<dl style="border: solid green 3px;">
    Definition list with border and padding.
    <dt>Term # 1
    <dd>This is the definition of term # 1.
    <dt>Term # 2</dt>
    <dd>This is the definition of term # 2.
</dl>
<dd>Free DD</dd>
<blockquote>BLOCKQUOTE</blokquote>
<dd style="border: solid magenta 2px;">Free DD with border</dd>
<blockquote style="border: solid orange 2px;">This is a BLOCKQUOTE with border</blockquote>
<li>Free LI</li>
</body>
</html>